<template>
  <div>
    <span
      class="title"
      @click="onTitleClick"
    >
      {{appName}}
    </span>
    <div class="header-right">
      <global-search />
      <div
        v-show="timeShow"
        ref="timeTextContainer"
        class="time-text-container header-item-hover" @click="onTimeClick"></div>

      <el-dropdown
        @command="onCommandClick"
        :show-timeout="10"
        class="current-user-container header-item-hover"
      >
        <div class="header-item-hover">
          <i v-if="!admin" class="el-icon-loading"></i>
          <el-avatar
            v-else
            size="small"
            :src="admin ? admin.imagePath || defaultAvatar : null"
            icon="el-icon-user-solid"
            class="current-user-avatar"
          />
          <span>{{admin ? admin.realName : '加载中'}}</span>
          <i class="el-icon-arrow-down el-icon--right" />
        </div>
        <el-dropdown-menu slot="dropdown" :visible-arrow="false" size="medium" class="current-user-menu">
          <el-dropdown-item icon="el-icon-s-tools" command="accountSettings">账号设置</el-dropdown-item>
          <el-dropdown-item icon="el-icon-switch-button" command="logout" divided>退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!--
      <el-tooltip content="更新日志">
        <div
          class="header-icon-item header-item-hover"
          @click="onChangeLogClick"
        >
          <i class="el-icon-s-promotion icon-button"></i>
        </div>
      </el-tooltip>
      -->
      <el-tooltip content="打开偏好设置">
        <div
          class="header-icon-item header-item-hover"
          @click="onSettingClick"
        >
          <i class="el-icon-setting icon-button"></i>
        </div>
      </el-tooltip>
      <el-tooltip content="进入/退出全屏">
        <div
          class="header-icon-item header-item-hover"
          @click="onFullScreenClick"
        >
          <i class="el-icon-full-screen icon-button"></i>
        </div>
      </el-tooltip>
      <!--
      <el-tooltip content="操作手册">
        <div
          class="header-icon-item header-item-hover"
          @click="onManualClick"
        >
          <i class="el-icon-reading icon-button"></i>
        </div>
      </el-tooltip>-->
      <el-tooltip content="基本操作引导">
        <div
          class="header-icon-item header-item-hover"
          @click="onHelpClick"
        >
          <i :class="`el-icon-${driverLoading ? 'loading' : 'help'} icon-button`"></i>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import GlobalSearch from './global-search/GlobalSearch'; 
import fullScreen from '@/utils/fullscreen';
import config, { APP_NAME } from '@/config/app.config';
import session from '@/auth/session';
import leftPad from 'left-pad';
import defaultAvatar from '@/assets/default-avatar.png';

export default {
  components: {
    GlobalSearch
  },
  props: {
    currentUser: null
  },
  watch: {
    currentUser(val) {
      this.admin = val;
      if(this.admin.orgId == 94) 
        this.appName = '东西湖区智慧养老服务平台';
    }
  },
  data() {
    return {
      appName: APP_NAME,
      admin: null,
      defaultAvatar,
      driverLoading: false,
      timeShow: config.get('timeShow'),
    };
  },
  mounted() {
    const {timeTextContainer} = this.$refs;
    const minuteTick = () => {
      let now = new Date();
      let timeText = `${now.getMonth() + 1}月${now.getDate()}日`;
      timeText += ` 周${['日','一','二','三','四','五','六'][now.getDay()]}`;
      timeText += ` ${leftPad(now.getHours(), 2, 0)}:${leftPad(now.getMinutes(), 2, 0)}`;
      timeTextContainer.innerText = timeText;
      setTimeout(minuteTick, (60 - now.getSeconds()) * 1000);
    };
    minuteTick();

    setTimeout(() => {
      this.$emit('enter');
    }, 300);
  },
  methods: {
    onTitleClick() {
      location.reload();
    },
    onCommandClick(cmd) {
      switch (cmd) {
        case 'accountSettings':
          this.pushPage('/admin/account/settings');
          break;
        case 'logout':
          this.logout();
          break;
      }
    },
    onFullScreenClick() {
      fullScreen.switch();
    },
    onSettingClick() {
      this.pushPage('/settings');
    },
    onChangeLogClick() {
      import('./ChangeLogDialog').then(c => {
        let changeLogDialog = new Vue(c.default);
        document.body.appendChild(changeLogDialog.$mount().$el);
        changeLogDialog.show();
      });
    },
    onManualClick() {
      window.open('/statics/manual.pdf');
    },
    async onHelpClick() {
      this.driverLoading = true;
      let driver = (await import('./driver.js')).default();
      this.driverLoading = false;
      driver.reset();
      setTimeout(() => {
        driver.start();
      }, 0);
    },
    onTimeClick() {
      this.pushPage('/calendar');
    },
    logout() {
      session.logout();
      window.fromLogout = true;
      this.$http.post('/api/admin/logout').then(() => {
        this.$router.replace('/login');
      });
    }
  }
}
</script>


<style scoped>
@media screen and (max-width: 600px) {
  .current-user-container {
    display: none;
  }
}

@media screen and (max-width: 1263px) {
  .time-text-container {
    display: none;
  }
}

.header-right {
  position: absolute;
  height: 60px;
  display: inline-block;
  right: 0;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.time-text-container {
  float: left;
  line-height: 60px;
  font-size: 14px;
  padding: 0px 16px;
}

.current-user-container {
  float: right;
  padding: 0px 16px;
  color: inherit;
}

.current-user-menu {
  min-width: 200px;
}

.current-user-avatar {
  position: relative;
  top: 7px;
  margin-right: 4px;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.title {
  padding-left: 20px;
  font-size: 22px;
  color: #fff;
  letter-spacing: 3px;
  cursor: pointer;
}
.icon-button {
  font-size: 16px;
  text-shadow: 0 1px 0px rgba(0,0,0,.25)
}

.header-icon-item {
  display: block;
  padding: 0px 16px;
  float: right;
}

.header-item-hover:hover {
  background-color: #53a8ff;
  color: #fff;
}
</style>

<style>
@keyframes header-animation
{
  from {
    top: -60px;
  }
  to {
    top: 0px;
  }
}

body > .el-container > .el-header {
  height: 60px;
  animation: header-animation 0.3s ease-in;
  line-height: 60px;
  padding: 0px;
  background:#409EFF;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.25);
  position: relative;
  overflow: hidden;
  
  z-index: 2;
  user-select: none;
}
</style>